<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Card from './ui/Card.vue'
import ScrollArea from './ui/ScrollArea.vue'
import { announcementService } from '../api'
import type { Announcement } from '../types'

interface DisplayEvent {
  id: number
  channel: string
  title: string
  timestamp: string
  content: string
  priority: string
}

const events = ref<DisplayEvent[]>([])
const isLoading = ref(false)
const error = ref<string | null>(null)

// 优先级到频道的映射
const priorityToChannel = (priority: string): string => {
  switch (priority) {
    case 'URGENT':
    case 'HIGH':
      return '系统公告'
    case 'NORMAL':
      return '广场动态'
    case 'LOW':
      return '提示信息'
    default:
      return '通知'
  }
}

// 格式化时间
const formatTimestamp = (timestamp: string): string => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 获取已发布的公告
const fetchAnnouncements = async () => {
  isLoading.value = true
  error.value = null

  try {
    const announcements = await announcementService.getPublishedAnnouncements()

    events.value = announcements.map((announcement: Announcement) => ({
      id: announcement.id,
      channel: priorityToChannel(announcement.priority),
      title: announcement.title,
      timestamp: formatTimestamp(announcement.createdAt),
      content: announcement.content,
      priority: announcement.priority,
    }))
  } catch (err: any) {
    console.error('获取公告失败:', err)
    error.value = err.response?.data?.message || '获取公告失败，请稍后重试'
  } finally {
    isLoading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchAnnouncements()
})
</script>

<template>
  <div class="h-full flex flex-col bg-muted/50 border-l">
    <!-- 标题 -->
    <div class="p-4 border-b bg-background">
      <h2 class="text-lg font-semibold">公共公告板</h2>
      <p class="text-sm text-muted-foreground">事件归档</p>
    </div>

    <!-- 事件列表 -->
    <ScrollArea class="flex-1 p-4">
      <!-- 加载状态 -->
      <div v-if="isLoading" class="flex items-center justify-center h-full">
        <div class="text-sm text-muted-foreground">加载中...</div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="flex items-center justify-center h-full">
        <div class="text-sm text-destructive">{{ error }}</div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="events.length === 0" class="flex items-center justify-center h-full">
        <div class="text-sm text-muted-foreground">暂无公告</div>
      </div>

      <!-- 公告列表 -->
      <div v-else class="space-y-3">
        <Card
          v-for="event in events"
          :key="event.id"
          class="p-3 hover:bg-accent/50 transition-colors cursor-pointer"
        >
          <div class="flex items-start justify-between gap-2 mb-2">
            <span class="text-xs font-medium text-primary bg-primary/10 px-2 py-1 rounded">
              {{ event.channel }}
            </span>
            <span class="text-xs text-muted-foreground whitespace-nowrap">
              {{ event.timestamp }}
            </span>
          </div>
          <h3 class="font-medium text-sm mb-1">{{ event.title }}</h3>
          <p class="text-xs text-muted-foreground line-clamp-2">
            {{ event.content }}
          </p>
        </Card>
      </div>
    </ScrollArea>
  </div>
</template>
